<template>
  <div class="process">
    <div class="add">
      <el-form :inline="true" :model="addForm" class="demo-form-inline">
        <el-form-item label="人员名称">
          <el-input v-model="addForm.name" clearable placeholder="请输入人员名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addPeople">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="staff-info">
      <div class="left">
        <div class="operate">
          <el-button type="primary" plain @click="operate">批量释放</el-button>
        </div>
        <el-table :data="zcTableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="no" label="No" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="job" label="职位" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <span>{{ row.status ? '正常' : "释放" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="row.status = 0">释放</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div class="operate">
          <el-button type="primary" plain @click="operate">批量加入</el-button>
        </div>
        <el-table :data="sfTableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="no" label="No" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="job" label="职位" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <span>{{ row.status ? '正常' : "释放" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="row.status = 1">加入</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="next-step">
      <el-space :size="20">
        <el-button type="primary" @click="lastStep">上一步</el-button>
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, defineEmits } from 'vue'
import { random } from 'loadsh'
const emits = defineEmits(['nextStep', 'lastStep'])
const addForm = reactive({
  name: ''
})
const tableData = ref([
  {
    no: '101110',
    name: 'Tom',
    job: '-',
    status: 0
  },
  {
    no: '101112',
    name: 'kerry',
    job: '-',
    status: 1
  }, {
    no: '101113',
    name: 'Till',
    job: '-',
    status: 0
  }, {
    no: '101114',
    name: 'Mark',
    job: '-',
    status: 1
  }, {
    no: '101115',
    name: 'Pole',
    job: '-',
    status: 0
  }
])

const sfTableData = computed(() => tableData.value.filter((item) => !item.status))
const zcTableData = computed(() => tableData.value.filter((item) => item.status))

const selectData = ref({
  data: [],
  type: ''
})

const addPeople = () => {
  tableData.value.push({
    no: `1000${random(1000, 9999)}`,
    name: addForm.name,
    job: '-',
    status: 1
  })
  addForm.name = ''
}

const operate = () => {
  selectData.value.data.forEach(element => {
    element.status = selectData.value.type
  })
}

const lastStep = () => {
  emits('lastStep', 0)
}
const nextStep = () => {
  emits('nextStep', 2)
}
</script>

<style lang="less" scoped>
.add {
  height: 50px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 20px;
}

.next-step {
  background-color: #fff;
  padding: 20px;
  text-align: end;
  margin-top: 10px;
}

.staff-info {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 10px;
  display: flex;

  .left,
  .right {
    flex: 1;
    padding: 20px;
  }

  .left {
    border-right: 10px solid #F2F6FC;
  }

  .operate {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
